<template>
  <div class="partner-detail-wrapper">
    <common-back :content="title"></common-back>
    <van-loading class="v-loading"
                 size="30px"
                 color="white"
                 v-show="!length" />
    <div class="img-wrap"
         w-750-380
         aspectratio>
      <img :src="info.cover_image"
           alt=""
           aspectratio-content>
    </div>
    <div class="intro">{{info.goods_name}}</div>
    <div class="price"><span>￥</span>{{info.goods_price}}</div>
    <div class="detail-title">详情介绍</div>
    <div class="content"
         v-html="info.content"></div>
    <common-button :content="buttonTitle"
                   @submit="handleSubmit"></common-button>
    <van-popup v-model="show"
               position="bottom">
      <van-area :area-list="areaList"
                value="110101"
                @confirm="handleFinish"
                @cancel="handleCancel" />
    </van-popup>

  </div>
</template>
<script>
import areaList from '@/assets/js/city'
import CommonBack from 'common/headerBack/back'
import CommonButton from 'common/button/button'
export default {
  name: 'detail',
  components: {
    CommonBack,
    CommonButton
  },
  computed: {
    length () {
      return Object.keys(this.info).length
    }
  },
  created () {
    this.getTitle()
    this.getInfo()
    this.getCity()
  },
  data () {
    return {
      title: '合伙人',
      buttonTitle: '立即加入',
      content: 'x',
      info: {},
      show: false,
      areaList: {},
      height: 44
    }
  },
  methods: {
    handleSubmit () {
      this.show = true
    },
    getTitle () {
      const title = this.$route.query.title
      this.title = title
    },
    getInfo () {
      const id = this.$route.params.id
      this.$api.partner.detail({ id })
        .then(this.getInfoSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    getInfoSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.info = data.detail
      }
    },
    getCity () {
      this.areaList = areaList
    },
    handleFinish (e) {
      const data = {}
      const list = e
      data.province = list[0].name
      data.city = list[1].name
      data.county = list[2].name
      data.id = this.$route.params.id
      data.address = data.province + data.city + data.county
      this.postCity(data)
      this.show = false
    },
    handleCancel () {
      this.show = false
    },
    postCity (data) {
      this.$api.partner.city({ data })
        .then(this.postCitySucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    postCitySucc (res) {
      const id = this.$route.params.id
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        this.$router.push({
          path: `/me/partner/partnerSettle/${id}`
        })
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.partner-detail-wrapper >>> .van-picker__toolbar
  height 80px

.partner-detail-wrapper >>> .van-picker__confirm, .partner-detail-wrapper >>> .van-picker__cancel
  font-size $shop_name
  display flex
  align-items center

.partner-detail-wrapper >>> .van-picker-column__item
  font-size $shop_name

.partner-detail-wrapper
  initPosition()
  overflow-y scroll
  background-color $common_bgc
  z-index 30
  padding-top 88px
  padding-bottom 100px

  .intro, .price
    width 100%
    padding()
    font-size $shop_name
    font-weight 400
    color $detail_title
    line-height 52px
    padding-top 20px
    padding-bottom 20px
    ellipsis()

  .price
    color $tab_active

  .detail-title
    width 100%
    height 80px
    padding()
    line-height 80px
    background-color $space
    font-size $address
    font-weight 500
    color $location

  .content
    padding()
    padding-top 20px
    padding-bottom 20px
    font-size $shop_name
    line-height 38px
    font-weight 400
    color $detail_title

.v-loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  z-index 100
  padding-left 10px
  padding-right 10px
  padding-top 10px
  padding-bottom 10px
  border-radius 3px
  background-color rgba(0, 0, 0, 0.5)
</style>
